<!--
	产品详情 页
-->
<!DOCTYPE html>
<html>
<head>
<title>Big store</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta property="og:title" content="Vide" />
<meta name="keywords" content="Big store" />
<script type="application/x-javascript">
	addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
	function hideURLbar(){ window.scrollTo(0,1); }
</script>
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<link href="css/style.css" rel='stylesheet' type='text/css' />
<link href="css/font-awesome.css" rel="stylesheet">

<script src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript">
	jQuery(document).ready(function($) {
		$(".scroll").click(function(event){		
			event.preventDefault();
			$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
		});
	});
</script>



</head>
<body>
<div class="header">
	<div class="container">
		<div class="logo">
			<h1 ><a href="index.html"><b>T<br>H<br>E</b>Big Store<span>The Best Supermarket</span></a></h1>
		</div>
		<div class="head-t">
			<ul class="card">
				<li id="usercenter" style="display: none"><a class="withtoken" id="a_usercenter" href="usercenter.html" ><i class="fa fa-user" aria-hidden="true"></i>个人中心</a></li>
				<li id="login"><a class="withtoken" href="login.html" ><i class="fa fa-user" aria-hidden="true"></i>登录</a></li>
				<li id="register"><a class="withtoken" href="register.html" ><i class="fa fa-arrow-right" aria-hidden="true"></i>注册</a></li>
				<li><a class="withtoken" href="orderlist.html" ><i class="fa fa-file-text-o" aria-hidden="true"></i>订单列表</a></li>
				<li><a class="withtoken" href="wishlist.html" ><i class="fa fa-heart" aria-hidden="true"></i>收藏</a></li>
				<li><a class="withtoken" href="cart.html" ><i class="fa fa-shopping-cart" aria-hidden="true"></i>购物车</a></li>
			</ul>
		</div>
		<script type="text/javascript">
            $(function(){
                var _this1=null;
                $('.nav>li').hover(function(){
                    _this1=$(this);
                    _this1.find('.second-nav').show();
                    var _this2=null;
                    _this1.find('.second-nav').find('li').hover(function(){
                        _this2=$(this);
                        _this2.find('.third-nav').show();
                        _this2.find('.third-nav').hover(function(){
                            $(this).show();
                        },function(){
                            $(this).hide();
                        });
                    },function(){
                        _this2.find('.third-nav').hide();
                    });
                },function(){
                    _this1.find('.second-nav').hide();
                });
            });
		</script>
		<div class="nav-top">
			<nav class="navbar navbar-default">

				<div class="collapse navbar-collapse" id="bs-megadropdown-tabs">
					<ul class="nav navbar-nav ">
						<li> <!--class=" active"--> <a href="index.html" class="hyper "><span>主页</span></a></li>

						<li class="dropdown">
							<a href="#" class="dropdown-toggle  hyper" data-toggle="dropdown" >
								<span> 商品类别 <b class="caret"></b></span>
							</a>
							<ul class="dropdown-menu multi second-nav" id="dropdown-ul">
								<!--<li ><a href="#">饮料&nbsp;&nbsp;&nbsp;&nbsp;></a>
									<ul class="dropdown-menu multi third-nav">
										<li><a href="#">汽水饮料</a></li>
										<li><a href="#">酒精饮料</a></li>
										<li><a href="#">纯牛奶</a></li>
										<li><a href="#">酸牛奶</a></li>
										<li><a href="#">其他饮料</a></li>
									</ul>
								</li>
								<li><a href="#">烟酒&nbsp;&nbsp;&nbsp;&nbsp;></a></li>
								<li><a href="#">厨具&nbsp;&nbsp;&nbsp;&nbsp;></a></li>
								<li><a href="#">蔬菜&nbsp;&nbsp;&nbsp;&nbsp;></a></li>
								<li><a href="#">鲜肉&nbsp;&nbsp;&nbsp;&nbsp;></a></li>-->
							</ul>
						</li>

						<li><a href="hot.html" class="hyper "><span> 热卖商品 </span></a></li>

						<li><a href="activities.html" class="hyper "><span> 促销活动 </span></a></li>

						<li><a href="contact.html" class="hyper"><span> 联系我们 </span></a></li>
					</ul>
				</div>
			</nav>

			<!--<div class="cart" >
                <span class="fa fa-shopping-cart my-cart-icon"><span class="badge badge-notify my-cart-badge"></span></span>
            </div>-->
			<div class="clearfix"></div>
		</div>

	</div>
</div>
  <!---->
<div data-vide-bg="video/video">
    <div class="container">
		<!--<div>-->
			<div class="search-form" style="padding: 30px">
				<div>
					<form action="search.html" method="get" id="theform">
						<select id="ptype" name="ptype" style="display: block;color:white;border: 1px solid white; background: transparent;">
							<option style="background: gray;" value="">全部</option>
							<option style="background: grey;" value="yinliao">饮料</option>
							<option style="background: grey;" value="lingshi">零食</option>
							<option style="background: grey;" value="shuiguo">水果</option>
							<option style="background: grey;" value="yanjiu">烟酒</option>
							<option style="background: grey;" value="chuju">厨具</option>
							<option style="background: grey;" value="shucai">蔬菜</option>
						</select>
						<input type="text" id="keyword" name="keyword" placeholder="Search..." name="Search..." />
						<input type="submit" value=" " />
					</form>
				</div>

			</div>		
		<!--</div>	-->
    </div>
</div>

    <script>window.jQuery || document.write('<script src="js/jquery-1.11.1.min.js"><\/script>')</script>
    <script src="js/jquery.vide.min.js"></script>

<!--content-->
	<div class="product">
		<div class="container">
			<div class="single-top-main">
				<div class="col-md-5 single-top">
					<div class="single-w3agile">

						<div id="picture-frame">
							<!--<img src="images/si.jpg" data-src="images/si-1.jpg" alt="" class="img-responsive"/>-->
							<img id="product_cover" class="img-responsive"/>
						</div>
						<script src="js/jquery.zoomtoo.js"></script>
						<script>
                            $(function() {
                                $("#picture-frame").zoomToo({
                                    magnify: 1
                                });
                            });
						</script>

					</div>
				</div>
				<div class="col-md-7 single-top-left ">
					<div class="single-right">
						<h3 id="product_title">Wheat</h3>
						<div class="pr-single">
							<p class="reduced " id="product_price">$5.00</p>
						</div>
						<div class="block block-w3">
							<div class="starbox small ghosting"> </div>
						</div>
						<p class="in-pa" id="product_msg">
							There are many variations of passages of Lorem Ipsum available, but the majority have suffered
							alteration in some form, by injected humour, or randomised words which don't look even slightly
							believable.
						</p>

						<div class="add add-3">
							<button class="btn btn-danger my-cart-btn my-cart-b" onclick="addToCart()" data-id="1" data-name="Wheat" data-summary="summary 1" data-price="6.00" data-quantity="1" data-image="images/si.jpg">Add to Cart</button>
							<button class="btn btn-danger my-cart-btn my-cart-b" onclick="addToWishlist()" data-id="1" data-name="Wheat" data-summary="summary 1" data-price="6.00" data-quantity="1" data-image="images/si.jpg">Add to wishlist</button>
						</div>
						<div class="clearfix"> </div>
					</div>
				</div>

				<div class="clearfix"> </div>

			</div>
		</div>

	</div>
<!--footer-->
<div class="footer">
	<div class="container">
		<div class="col-md-3 footer-grid">
			<h3>About Us</h3>
			<p>Big Store 是阿里巴巴集团全力打造的网上超市。Big Store 为广大网购消费者提供进口食品、食品饮料、粮油副食、美容洗护、家居用品、家庭清洁、
				母婴用品等所有生活必需品，商品品质100%保证。随时随地，轻松用手机或鼠标逛超市，生活快消品一次性购齐，不用排队、送货上门，
				还提供7天无理由退货服务。Big Store，让生活更简单。</p>
		</div>

		<div class="col-md-2 footer-grid "></div>

		<div class="col-md-3 footer-grid ">
			<h3>Menu</h3>
			<ul>
				<li><a href="index.html">主页</a></li>
				<li><a href="hot.html">热卖商品</a></li>
				<li><a href="activities.html">促销活动</a></li>
				<li><a href="contact.html">联系我们</a></li>
			</ul>
		</div>

		<div class="col-md-3 footer-grid">
			<h3>My Account</h3>
			<ul>
				<li><a href="login.html">登录</a></li>
				<li><a href="register.html">注册</a></li>
				<li><a href="wishlist.html">收藏</a></li>
				<li><a href="cart.html">购物车</a></li>
			</ul>
		</div>
		<div class="clearfix"></div>

		<div class="copy-right">
			<p> &copy; 2018 Big store. All Rights Reserved </p>
		</div>
	</div>
</div>
<!-- //footer-->

<script src="js/header_category.js"></script>
	<script type="text/javascript">
        //从浏览器URL获取GET请求参数
        function getQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]); return null;
        }
        var token = getQueryString('t')==null? '':getQueryString('t');
        var id = getQueryString('id')==null? '':getQueryString('id');
        var uid = getQueryString('uid')==null? '':getQueryString('uid');
        //移除某个元素内的所有子节点
        function removeAllChild(nodeId){
            var div = document.getElementById(nodeId);
            //当div下还存在子节点时 循环继续
            while(div.hasChildNodes()) {
                div.removeChild(div.firstChild);
            }
        }
        //加载查询框类别
        function loadCategory() {
            var responseBody = new $.ajax({
                type:"GET",
                url:"/v1/categoryleaf",
                async:false,
				/*success:loadHeaderCategory()*/
            });
            console.log(responseBody,'search leaf !!!');
            var data = responseBody.responseJSON;

            removeAllChild('ptype');
            var selectEl = document.getElementById('ptype');
            var op = document.createElement('option');
            op.style.background = 'gray';
            op.setAttribute('value','');
            op.innerHTML = '--全部--';
            selectEl.appendChild(op);
            for(var i = 0; i < data.length; i ++){
                var opt = document.createElement('option');
                opt.style.background = 'gray';
                opt.setAttribute('value',''+data[i].id);
                opt.innerHTML = data[i].name;
                selectEl.appendChild(opt);
            }
        }

		function loadProduct() {
            var responseBody = new $.ajax({
                type:"GET",
                url:"/v1/products/"+id,
                async:false,
				/*success:loadHeaderCategory()*/
            });
            console.log('product info',responseBody);
            var data = responseBody.responseJSON;

            var cover = document.getElementById('product_cover');
            cover.setAttribute('src',data.cover);
            var title = document.getElementById('product_title');
            title.innerHTML = data.title;
            var price = document.getElementById('product_price');
            price.innerHTML = data.price;
            var msg = document.getElementById('product_msg');
            msg.innerHTML = data.msg;
        }
        loadCategory();
        loadProduct();
		function addToCart() {
			if(token == ''){
			    window.location = 'login.html';
			}else{
                var responseBody = new $.ajax({
                    type:"POST",
                    url:"/v1/cart",
                    async:false,
					/*success:loadHeaderCategory()*/
					headers:{
					    p:id,
						t:token
					}
                });
                console.log('add to cart',responseBody);
                var data = responseBody.responseJSON;
                if(responseBody.status == 200 || responseBody.status == 203){
                    alert('添加至购物车成功');
				}else{
                    alert('添加至购物车失败，请稍后重试！')
				}
			}
        }
        function addToWishlist() {
            if(token == ''){
                window.location = 'login.html';
            }else{
                var responseBody = new $.ajax({
                    type:"POST",
                    url:"/v1/wishlist",
                    async:false,
					/*success:loadHeaderCategory()*/
                    headers:{
                        p:id,
                        t:token
                    }
                });
                console.log('add to wishlist',responseBody);
                var data = responseBody.responseJSON;
                if(responseBody.status == 200 || responseBody.status == 203){
                    alert('添加至收藏成功');
                }else{
                    alert('添加至收藏失败，请稍后重试！')
                }
            }
        }

        $(document).ready(function() {
            var alist = document.getElementsByTagName('a');
            console.log('alist', alist);
            for (i = 0; i < alist.length; i++) {
                var hrefstr = alist[i].getAttribute('href');
                if(hrefstr == null){
                    continue;
                }
                console.log('hrefstr', hrefstr);
                if(hrefstr.indexOf('?')>0){
                    hrefstr = hrefstr +'&t='+token;
                }else{
                    hrefstr = hrefstr +'?t='+token;
                }
                alist[i].setAttribute('href', ''+hrefstr);
            }
            var theform = document.getElementById('theform');
            var input = document.createElement('input');
            input.setAttribute('type','hidden');
            input.setAttribute('name','t');
            input.setAttribute('value',token);
            theform.appendChild(input);

            loadUserName(token);
		/*
			var defaults = {
			containerID: 'toTop', // fading element id
			containerHoverID: 'toTopHover', // fading element hover id
			scrollSpeed: 1200,
			easingType: 'linear' 
			};
		*/								
			$().UItoTop({ easingType: 'easeOutQuart' });
		});

	</script>
	<a href="#" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>

  </body>
</html>